<template>
<div>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>

    <template>
    <el-card class="box-card"
             style="margin-top: 30px">
      <el-table :data="articalInfo"
                border
                style="width: 100%;">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="600">
        </el-table-column>
        <el-table-column
          label="类型">
          <template slot-scope="scope">
              <p>{{scope.row.type==1? '文章':'视频'}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="user.nickname"
          label="作者">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <div class="block"
             style="margin-top: 30px">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="1"
                           :page-sizes="[4,6,8,10]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="length">
            </el-pagination>
        </div>

    </template>
      </el-card>
    </template>
    
  </div>
</template>

<script>
import { getArtical } from "../apis/artical";
export default {
data() {
  return {
    articalInfo:[],
    pageIndex: 1,
    pageSize: 4,
    length:null
  }
},
methods: {
    init(){
        getArtical({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        })
        .then(res => {
            this.articalInfo = res.data.data
        })
    },
    handleEdit(index, row) {
      //console.log(index, row);
    },
    handleDelete(index, row) {
      //console.log(index, row);
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.init()
        //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        this.pageIndex = val
        this.init()
        //console.log(`当前页: ${val}`);
    }
},
mounted () {
    getArtical({
        pageSize: 100000
    })
    .then(res => {
        this.length = res.data.data.length
    })
    this.init()
},
watch: {
    
}  
};

</script>

<style lang="less" scoped>

</style>